<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王佳佳">
    <title></title>
    <style>
        *
        {
            box-sizing: border-box;
        }
        body
        {
            margin: 0
        }
        section
        {
			width: 300px;
			margin: 50px auto;
			background-color: #333;
			padding-top: 5px; 
			color: white;
			text-align: center; 
		}
		span{
			display: inline-block;
			padding: 0 10px;
			margin: 0 10px;
			border: 2px solid gray;
			background-color: white;
			color: black;
		}
    </style>
</head>
<body>
    <section>
        <p>
            <!-- <span>00</span>时 -->
            <span>01</span>分
            <span>10</span>秒
        </p>
    <button type="button" onclick="time">开始倒计时</button>
    </section>
</body>
</html>

<script>
    // var count = 0;
    // function add(a,b)
    // {
    //     count ++;
    //     //arguments 参数列表
    //     // arguments.callee  方法本身
    //     // console.dir(arguments);

    //     // console.log(arguments[0]);   打印出方法中的参数
    //     // console.log(arguments[1]);
    //     console.log(count);
    //     setTimeout(arguments.callee,1000)
    // }
    // add(2,3)

    

    var button = document.querySelector('button');
    var isbegin = false;        //控制开始或暂停
    var timer;
    var isend = false;
    button.onclick = function()
    {
        if(alltimes == -1)
        {
            button.innerHTML = '计时结束';
            // isend = true
        }
        isbegin = !isbegin;
        if (isbegin == true) 
        {
            //true 已经开始
            button.innerHTML = '暂停倒计时';
            //启用定时器，每隔一秒钟更新一次时间
            timer = setInterval(start,1000)
        } 
        else 
        {
            //false 已经暂停
            button.innerHTML = '开始倒计时';
            clearInterval(timer);
        }
    }

    function start()
    {
        //获取时间，转化为秒数
        var spans = document.querySelectorAll('span');
        var alltimes = spans[0].innerHTML*60 + spans[1].innerHTML*1;

        if(alltimes == 0)
        {
            clearInterval(timer);
            return;
        }
        alltimes --;

        //把减少之后的时间： 秒数  -->  分钟数 和秒数
        var minutes = parseInt(alltimes/60);
        var seconds = alltimes%60;

        if(alltimes == 0)
        {
            button.innerHTML = ('计时结束');
            isend = true;
        }


        spans[0].innerHTML = minutes < 10 ?  '0'+minutes : minutes;
        spans[1].innerHTML = seconds < 10 ?  '0'+seconds :seconds;
    }
</script>